<template>
  <div class="trademark">
    <div class="title">1.3亿全球商标精准查询，避免商标侵权，助力品牌保护</div>
    <div class="all">
      <div class="saerch">
        <span
          :class="searchIndex === index ? 'select-span':''"
          v-for="(item,index) in search"
          :key="index"
          @click="searchIndex = index"
        >{{ item.title }}</span>
      </div>

      <div class="ipt">
        <span class="h11">中国</span>
        <img src="@/assets/zy/three.png" alt srcset />
        <el-input style="flex: 1" v-model="input" placeholder="请输入商标名称、申请号或申请人名称" />
        <div class="btn" @click="toPath('/trademark/trademarkr')">立即搜索</div>
      </div>

      <div class="enter">
        <span>快捷入口</span>
        <div class="z_flex" @click="toPath(`/trademark/senior`)">高级检索</div>
        <div class="z_flex" @click="toPath('/trademark/image')">图像检索</div>
      </div>
    </div>
    <div class="num">
      <div class="num-view" v-for="(item,index) in numList" :key="index">
        <div>
          {{ item.num }}
          <span>{{ item.unit }}</span>
        </div>
        <div>{{ item.tips }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
let search = ref([
  { title: "综合搜索" },
  { title: "商标名称" },
  { title: "申请号" },
  { title: "申请人" }
]);
let searchIndex = ref(0);

let numList = ref([
  { num: 1.3, unit: "亿+", tips: "全球商标数据" },
  { num: 2000, unit: "个", tips: "国家/地区/组织" },
  { num: 2000, unit: "万+", tips: "商标申请人" },
  { num: 2000, unit: "万+", tips: "代理机构" },
  { num: 2000, unit: "+", tips: "服务机构" }
]);

const toPath = url => {
  router.push(url);
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__wrapper {
  box-shadow: 0 0 0 1px transparent inset;
}
.trademark {
  background: url("../../assets/zhome/trademark.png") no-repeat;
  height: 100%;

  .num {
    display: flex;
    margin: 160px 0 0;
    padding: 0 260px;
    &-view {
      flex: 1;
      div:first-of-type {
        font-size: 28px;
        font-family: San Francisco Display, San Francisco Display-Bold;
        font-weight: 600;
        text-align: center;
        color: #202020;
        line-height: 36px;
        span {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #222426;
          line-height: 20px;
          margin-left: -5px;
        }
      }
      div:last-of-type {
        padding-top: 10px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        color: #222426;
        line-height: 20px;
        text-align: center;
      }
    }
  }
  .all {
    padding: 0 460px;
    .enter {
      display: flex;
      align-items: center;
      margin-top: 16px;
      span {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #202020;
        line-height: 20px;
      }
      div {
        width: 78px;
        height: 28px;
        background: #dfe8fb;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: center;
        color: #0052d9;
        line-height: 20px;
        margin-left: 12px;
        cursor: pointer;
      }
    }
    .ipt {
      height: 48px;
      background: #ffffff;
      border: 1px solid #1752d9;
      border-radius: 4px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      .h11 {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        color: #222426;
        padding-left: 18px;
        display: flex;
        align-items: center;
      }
      img {
        width: 12px;
        height: 12px;
        margin: 0 0 0 5px;
      }

      .btn {
        width: 120px;
        line-height: 48px;
        height: 100%;
        background: #0052d9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        cursor: pointer;
        color: #ffffff;
      }
    }
  }
  .title {
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #202020;
    line-height: 40px;
    padding-top: 163px;
    padding-bottom: 53px;
  }
  .saerch {
    display: flex;
    position: relative;
    padding: 30px 0 16px;
    span {
      padding: 0 12px;
      cursor: pointer;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #202020;
      line-height: 20px;
      position: relative;
    }
    span::before {
      content: "";
      width: 1px;
      height: 14px;
      background: #202020;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
    }
    span:first-of-type {
      padding-left: 0;
    }
    span:last-of-type::before {
      content: "";
      height: 14px;
      background: transparent;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
    }
    .select-span {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: 600;
      color: #0052d9;
    }
  }
}
</style>